<template>
  <div class="course-ict">
    <div class="course-ict-title">
        <div class="course-ict-title-text">课程体系</div>
        <div class="course-ict-describe">从技术小白到专业人才的逆袭之路</div>
    </div>
    <div class="course-ict-body">
        <p class="course-ict-item-title">基础课程</p>
        <div class="course-basic">
            <div @click="toGoktechCollege">
                <div class="icon-container">
                    <i class="icon-chujiwangl">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </div>
                <span>初级网络</span>
            </div>
            <div @click="toGoktechCollege">
                <div class="icon-container">
                    <i class="icon-gaojilu">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </div>
                <span>高级路由</span>
            </div>
            <div @click="toGoktechCollege">
                <div class="icon-container">
                    <i class="icon-ccnp">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </div>
                <span>企业交换</span>
            </div>
            <div @click="toGoktechCollege">
                <div class="icon-container">
                    <i class="icon-xitong">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </div>
                <span>企业系统</span>
            </div>
        </div>
        <p class="course-ict-item-title">专题课程</p>
        <div class="course-exclusive">
            <span>企业专题+企业实战</span>
            <span>内容安全专题+安全实战</span>
            <span>云计算专题+云计算实战</span>
            <span>存储专题+存储实战</span>
        </div>
        <p class="course-ict-item-title">认证课程</p>
        <div class="course-subject">
            <div class="course-subject-item">
                <div class="course-subject-item-img">
                    <img src="/img/college/HCIE.png">
                </div>
                <div>HCIE-R&S HCIE-Security认证</div>
            </div>
            <div class="course-subject-item">
                <div class="course-subject-item-img">
                    <img src="/img/college/CCIE.png">
                </div>
                <div>CCIE-R&S认证</div>
            </div>
        </div>
        <p class="course-ict-item-title">就业专题课程</p>
        <div class="course-ict-text">
            以学员就业为目的的课程教学体系。为了让学员在掌握网络相关技能的同时，提升自身综合素质，以匹配各类公司岗位需求，满足企业对于人才 招聘全面考量的要求，为此本课程独立于技术课程外，开展各种综合素质提升活动，并对各大公司、各类岗位有针对性的开展专题课程，包括： 就业动员专题、公司介绍专题、岗位介绍专题、简历指导、笔试训练，面试训练、ppt演讲等等。
        </div>
        <p class="course-ict-bottom-title">最后成为优秀的专业人士</p>
        <div class="course-to-detail">
            <span @click="toDetail">查看完整培训流程</span>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'course_ict',
  data () {
      return{
        
      }
    
  },
  components: {
   
  },
  methods: {
    toDetail(){
        this.$router.push({
            name: "college-ict_flow"
        })
    },
    toGoktechCollege(){
        window.open('https://campus.goktech.cn/directionCourse?direction=1&type=&cityId=')
    }   
  }
}
</script>

<style lang="stylus" scoped>
.course-ict{
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
  margin-bottom: 20px;  
}
.course-ict-title{
  height: 58px;
  line-height: 58px;
  padding-left: 30px;
  border-bottom: 1px solid rgba(238,238,238,1);
  >div{
    display: inline-block;
  }
  .course-ict-title-text{
    font-size:16px;
    color:rgba(30,30,30,1);
    margin-right: 30px;
  }
  .course-ict-describe{
    font-size:12px;
    color:rgba(130,130,130,1);
  }
}
.course-ict-body{
    padding: 40px 30px;
}
.course-ict-item-title{
    height:14px;
    font-size:14px;
    color:rgba(168,168,168,1);
    line-height:14px;
    margin-bottom: 20px;
}
.course-basic{
    font-size: 0;
    margin-bottom: 60px;
    >div{
       font-size: 14px;
       text-align: center;
       display: inline-block;
       width:146px;
       height:146px;
       background:rgba(255,255,255,1);
       margin-right: 103px; 
       cursor: pointer;
       &:hover{
           background:rgba(245,245,245,1);
       } 
    }
    >div:nth-child(4n){
       margin-right: 0; 
    }
    .icon-container{
        margin-bottom: 16px;
        margin-top: 38px;
        font-size: 36px;
    }
}

.course-exclusive{
    font-size: 0;
    margin-bottom: 60px;
    span{
        display: inline-block;
        padding: 15px 20px;
        background:rgba(242,242,242,1);
        font-size:14px;
        line-height: 14px;
        color:rgba(30,30,30,1);
        margin-right: 20px;
    }
}
.course-subject{
    font-size: 0;
    margin-bottom: 60px;
    .course-subject-item{
        width: 216px;
        margin-right: 123px;
        display: inline-block;
        .course-subject-item-img{
            width:216px;
            height:162px;
            margin-bottom: 20px;
            padding: 10%;
            img{
                height: 100%;
                width: 100%;
            }
        }
        div{
            font-size:14px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(30,30,30,1);
            line-height:19px;
            text-align: center;
        }
    }
}
.course-ict-text{
  font-size:14px;
  color:rgba(30,30,30,1);
  line-height:34px;
  margin-bottom: 60px;
}
.course-ict-bottom-title{
    font-size:24px;
    font-family:PangMenZhengDao;
    color:rgba(255,39,88,1);
    line-height:27px;
    text-align: center;
    position: relative;
    margin-bottom: 40px;
}
.course-ict-bottom-title:before{
    width:305px;
    height:1px;
    content: '';
    background:rgba(238,238,238,1);
    position: absolute;
    top: 15px;
    left: 0;
}
.course-ict-bottom-title:after{
    width:305px;
    height:1px;
    content: '';
    background:rgba(238,238,238,1);
    position: absolute;
    top: 15px;
    right: 0;
}
.course-to-detail{
    text-align: center;
    margin-bottom: 20px;
    span{
        cursor: pointer;
        display: inline-block;
        padding: 9px 20px;
        font-size:14px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
        background:rgba(20,87,253,1);
        line-height:14px;
        &:hover{
            background:rgba(14,53,151,1);
        }
    }
}
</style>
